<template>
  <ChartHeader title="预警类型分布" :go-to-detail="goToDetail"></ChartHeader>

  <v-chart class="chart" :option="option" />
</template>

<script lang="ts" setup>
import { defineProps, reactive, toRefs, watchEffect } from 'vue'

import { NumData, TotalData } from '../types'
import { useWaringType } from '../use/useWaringType'
import { useRouter } from 'vue-router'
import ChartHeader from './ChartHeader.vue'
import VChart from 'vue-echarts'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const router = useRouter()

function goToDetail() {
  router.push({
    name: 'TodoDetail',
    query: { activeNames: 'warn', queryField: 'warningType' },
  })
}

const { option } = useOptions()

function useOptions() {
  const { numData } = toRefs(props)

  const { typexAxisData, typeSeriesData } = useWaringType({ numData })

  const option = reactive({})

  watchEffect(() => {
    Object.assign(option, {
      title: {
        // text: title,
      },
      grid: {
        top: '20%',
        bottom: '15%',
        height: 150,
      },
      xAxis: {
        type: 'category',
        data: typexAxisData.value,
        axisLabel: {
          interval: 0,
          rotate: 40,
        },
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'bar',
          emphasis: {
            focus: 'series',
          },
          barMaxWidth: 20,
          data: typeSeriesData.value,
          itemStyle: {
            normal: {
              color: '#409eff',
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'black',
                  fontSize: 12,
                },
              },
            },
          },
        },
      ],
    })
  })

  return {
    option,
  }
}
</script>

<style scoped lang="less">
@import url('./board-common.less');

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  button {
    color: #455a6499;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    border: 0;
    background: transparent;
    height: 20px;
  }
}

.chart {
  height: 300px;
}
</style>
